<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<div id="app-1">
  <p>Original message: "{{message}}"</p>
  <p>Computed reversed message: "{{reversedMessage1}}"</p>
  <p>这个也会反转吗？"{{reversedMessage()}}"</p>
</div>
<div id="demo">{{fullName}}</div>
<div id="watch-demo">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{answer}}</p>
</div>
<script>
  var vm1 = new Vue({
    el: '#app-1',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage1: function () {
        return this.message.split('').reverse().join('')
      }
    },
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
  })
  var vm2 = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val+' '+this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName+' '+val
      }
    }
  })
  var vm3 = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      fullName: function () {
        return this.firstName+' '+this.lastName
      }
    }
  })
  var watchVM = new Vue({
    el: '#watch-demo',
    data: {
      question: '',
      answer: 'I can not tell you until you ask a question'
    },
    watch: {
      //如果question发生变化，这个函数就会运行
      question: function (newQuestion,oldQuestion) {
        this.answer = 'Waitting for you to stop typing...'
        this.debouncedGetAnswer()
      }
    },
    created: function () {
      // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
      // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
      // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
      // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
      // 请参考：https://lodash.com/docs#debounce
      this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
    },
    methods: {
      getAnswer: function () {
        if(this.question.indexOf('?')===-1){
          this.answer = 'Questions usually contain a question mark.'
          return
        }
        this.answer = 'thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'ERROR! Could not reach the API.'+error
          })
      }
    }
  })
</script>

</body>
</html>
